import { Image, View } from '@tarojs/components'
import React,{ useState,useRef, useEffect } from 'react'
import CountDownTimer from '@/components/countdown-timer/index'
import Taro from '@tarojs/taro'
import './payment.scss'

export default function Cashier() {
  const [info,setInfo] = useState({})
  const jumpUrl = useRef('')
  const [fromFlag,setFromFlag] = useState('')
  const handleBack =e=>{
    Taro.redirectTo({
      url:`/pages/fineEngine/webView?url=${encodeURIComponent(url)}`
    })
  }
  useEffect(()=>{
    Taro.setNavigationBarTitle({
      title:'收银台'
    })
    const {router} = Taro.getCurrentInstance()
    let params = router.params
    Taro.$get(`/order/users/orders/detail?orderId=${params.id}`).then(res=>{
      if(res.code == '1'){
        setInfo(res.content)
        if((res.content.totalPayment*1) > 0){
          setTimeout(()=>{
            handlePay(params.id)
          },500)
        }else{
          Taro.redirectTo({
            url:`/orderSubPack/pay-status/index?id=${params.id}`
          })
        }
      }else{
        Taro.showToast({
          title:res.message,
          icon:'none'
        })
      }
    })
  },[])
  
  const handlePay = async (e)=>{    /// 点击去支付
    Taro.showLoading({
      title:'加载中...'
    })
    const data = {
      appId:Taro.$mpAppid,
      openId:await Taro.getOpenId(),
      orderId:e || info.id || info.orderId
    }
    Taro.$post('/order/users/orders/pay',data,'1').then(ret=>{
      if(ret.code == '1'){
        let {content} = ret
        if(process.env.TARO_ENV == 'tt'){
          tt.pay({
            orderInfo: {
              order_id:content.data.orderId,
              order_token: content.data.orderToken
            },
            service: 5,
            _debug:1,
            success:res=>{
              if(res.code == 0){
                Taro.redirectTo({
                  url:`/orderSubPack/pay-status/index?id=${data.orderId}`
                })
              }
            },
            fail:err=>{
              uni.showToast({
                title:'支付失败',
                icon:'none'
              })
            }
          });
          return;
        }
        Taro.requestPayment({
          timeStamp: content.timeStamp,
          nonceStr: content.nonceStr,
          package: content.package,
          signType: content.signType,
          paySign: content.paySign,
          success:res=>{
            Taro.redirectTo({
              url:`/orderSubPack/pay-status/index?id=${data.orderId}`
            })
          },
          fail:err=>{
            Taro.showToast({
              title:'支付失败',
              icon:'none'
            })
          }
        })
      }else{
        Taro.showToast({
          title:ret.message,
          icon:'none'
        })
      }
    })
  }

  return (
    <View className='third-pay'>
      <View className="pay-header">
        <View className="header-price">￥{info.totalPayment || 0}</View>
        {info.id?
        <CountDownTimer time={info.expireSecond*1000} autoStart={true} onFinish={handleBack}></CountDownTimer>:null}
      </View>
      <h2 className="pay-h2">请选择支付方式</h2>
      <View className="pay-list">
        {process.env.TARO_ENV == 'tt'?
        <View className="list-item">
          <Image src={require('@/src/images/common/douyin.png')} className="item-img"></Image>
          抖音
          <Image src={require('@/src/images/common/yuan.png')} className="item-icon"></Image>
        </View>:
        <View className="list-item">
          <Image src={require('@/src/images/common/weixin-icon.png')} className="item-img"></Image>
          微信
          <Image src={require('@/src/images/common/yuan.png')} className="item-icon"></Image>
        </View>}
      </View>
      {info.id?
      <View className="pay-button" onClick={()=>{handlePay()}}>确认支付 ￥{info.totalPayment}</View>:null}
    </View>
  )
}
